<template>
	<view class=" body">
		<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query" :default-page-no="1"
			:default-page-size="10">
			<view class="contentBox viewWidth">
				<template v-if="loading">
					<view class="contentItem" v-for="item in 8" :key="item">
						<view class="Skeleton" style="width: 100%;height: 300rpx;" />
						<view class="itemInfo">
							<view class="Skeleton" style="width:100%;height: 30rpx;margin-top: 10rpx" v-for="item in 2"
								:key='item' />
				
						</view>
					</view>
				</template>
				<template v-else>
					<view class="contentItem" v-for="item in data" :key="item.id" @click="jump(item.id)">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="itemInfo">
				
							<view>
								<u--text :text='item.title' size='26rpx' :lines='1' />
							</view>
							<view>
								<u--text mode="price" :text='item.charge' size='26rpx' color='red' />
							</view>
						</view>
					</view>
				</template>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				loading: true
			}
		},
		methods: {
			jump(id){
				this.$utils.navigateTo({
					url:'/product/detail?id='+id
				})
			},
			query(page, size) {
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Product.List(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete(res.data.products.data)
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 20rpx 0 0;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contentBox {
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		image {
			width: 100%;
			background-color: #000;
			height: 300rpx;
			border-radius: 8rpx 8rpx 0 0;
			box-shadow: 0 0 20rpx #aaa;
		}

		.contentItem {
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			position: relative;
			box-shadow: 0 0 10rpx #999;
			width: 350rpx;
			padding: 10rpx;
			box-sizing: border-box;

			


		}




	}
</style>